<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20.下拉菜单</title>
    <script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>
    <script type="text/javascript" src="../layui-v2.7.6/layui/jquery-1.10.1.js"></script>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<button class="layui-btn" id="demo1">
    下拉菜单
    <i class="layui-icon layui-icon-down layui-font-12"></i>
</button>

<table class="layui-table">
    <tbody>
    <tr>
        <td>列表 1</td>
        <td><button class="layui-btn layui-btn-sm demolist" data-id="111">更多操作</button></td>
    </tr>
    <tr>
        <td>列表 2</td>
        <td><button class="layui-btn layui-btn-sm demolist" data-id="222">更多操作</button></td>
    </tr>
    <tr>
        <td>列表 3</td>
        <td><button class="layui-btn layui-btn-sm demolist" data-id="333">更多操作</button></td>
    </tr>
    </tbody>
</table>

<button class="layui-btn" id="demo">
   右键展开
</button>

<script>
    layui.use('dropdown', function(){
        var dropdown = layui.dropdown
        //这个可以作为侧边栏
        dropdown.render({
            elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
            ,data: [{
                title: 'menu item 1'
                ,id: 100
                ,href: '#'
            },{
                title: 'menu item 2'
                ,id: 101
                ,href: '{{d.root}}/' //开启超链接
                ,target: '_blank' //新窗口方式打开
            },
                {type: '-'}
            ,{
                title: 'menu item 3'
                ,id: 102
                ,type: 'group'  //菜单类型，支持：normal/group/parent/-
                ,child: [{
                    title: 'menu item 3-1'
                    ,id: 103
                },{
                    title: 'menu item 3-2'
                    ,id: 104
                    ,child: [{
                        title: 'menu item 3-2-1'
                        ,id: 105
                    },{
                        title: 'menu item 3-2-2'
                        ,id: 106
                    }]
                },{
                    title: 'menu item 3-3'
                    ,id: 107
                }]
            },{type: '-'},{
                title: 'menu item 4'
                ,id: 108
            },{
                title: 'menu item 5'
                ,id: 109
                ,child: [{
                    title: 'menu item 5-1'
                    ,id: 11111
                    ,child: [{
                        title: 'menu item 5-1-1'
                        ,id: 2111
                    },{
                        title: 'menu item 5-1-2'
                        ,id: 3111
                    }]
                },{
                    title: 'menu item 5-2'
                    ,id: 52
                }]
            },{type:'-'},{
                title: 'menu item 6'
                ,id: 6
                ,type: 'group'
                ,isSpreadItem: false
                ,child: [{
                    title: 'menu item 6-1'
                    ,id: 61
                },{
                    title: 'menu item 6-2'
                    ,id: 62
                }]
            }]
            ,id: 'demo1'
            //菜单被点击的事件
            ,click: function(obj){
                console.log(obj);
                layer.msg('回调返回的参数已显示再控制台');
            }
        });
    });
</script>


<script>
    layui.use('dropdown', function(){
        var dropdown = layui.dropdown
            ,$ = layui.jquery;

        dropdown.render({
            elem: '.demolist'
            ,data: [{
                title: 'item 1'
                ,id: 'aaa'
            }, {
                title: 'item 2'
                ,id: 'bbb'
            }]
            ,click: function(data, othis){
                var elem = $(this.elem)
                    ,listId = elem.data('id'); //表格列表的预埋数据
                layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);
                console.log(elem);
                console.log(data);
            }
        });
    });
</script>

<script>
    var dropdown = layui.dropdown;

    //执行菜单
    dropdown.render({
        elem: '#demo' //在 id="demo" 的元素中触发事件。也可以直接设置为 document，从而重置整个右键菜单
        // ,trigger: 'contextmenu' //右键事件
        ,trigger: 'hover' //右键事件
        ,data: [{
            title: 'menu item 1'
            ,id: 1
        },{
            title: 'menu item 2'
            ,id: 'reload'
        }]
    });
</script>
</body>
</html>